<template>
    <span @click="showDialog">
        <slot></slot>
        <!--没有这个在表格中被覆盖! append-to=".content"  | append-to-body  -->
        <component :is="props.mode == 'dialog'? ElDialog : myFormCont" :teleported="false" append-to-body draggable
            v-if="myOptions.modalVisible" v-model="myOptions.modalVisible" :title="data.computedDialogTitle" width="800"
            align-center destroy-on-close>
            <div>
                <el-form size="default" ref="formRef" style="width:100%" :model="data.formData" status-icon
                    :rules="data.formRules" label-position="right" label-width="auto" class="demo-ruleForm f-p10 f-bsb">
                    <el-row>
                        <!-- :rules="[{ required: true, message: '该项必填!', trigger: ['blur', 'change'], }]" -->
                        <!-- item开始 -->
                        <el-col :span="8" class="f-p2">
                            <el-form-item label-width="" label="输入框" prop="aaa">
                                <el-input class="myInput" v-model="data.formData.aaa" :maxlength="60" clearable
                                    :disabled="data.isDetail" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- item结束 -->
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click.stop="hideDialog">取消</el-button>
                    <el-button :loading="data.loading" type="primary" @click.stop="onSubmit">确认</el-button>
                </div>
            </template>
        </component>
    </span>
</template>
<script setup>
import { h, ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
import { ElDialog } from 'element-plus'
const formRef = ref();
const myFormCont = {
    render() {
        return h('div', [
            this.$slots.header && this.$slots.header(),
            this.$slots.default && this.$slots.default(),
            this.$slots.footer && this.$slots.footer()
        ])
    }
}

onMounted(() => {
    if (klcs.isTest()) {
        // if (data.type == 'add'){
        //console.warn("我是测试点,我修改了….弹窗状态.")
        // myOptions.modalVisible = true;
        //}
    }
    getDetail()

})

const myOptions = reactive({
    modalVisible: true,
    UrlType: 'ajaxTest',
    editUrl: "/aaaaaa",
    detailUrlType: 'ajaxTest',
    detailUrl: "/ccccc", // 如需要请求详情,则需要传入详情的url,不然不触发detail
    detailIdName: "id",
    addUrl: "/bbbbbbb",
    arrayObject: { "timeArray": ["start1", "end1"] },// 数组转对象的参数
    stringArray: ["lll"],// 字符串转数组的参数
    pickerFormat: 'YYYY-MM-DD'// 'YYYY-MM-DD HH:mm:ss';
})

const data = reactive({
    formData: {
        ssss: dayjs(new Date()).format(myOptions.pickerFormat), // 需要默认值的参数
    },
    formRules: {// 特殊校验项的处理.
        hhhh: [// 必填,以及长度,一般用于校验字数.
            { required: true, message: '必填!', trigger: 'blur' },
        ]
    },
    computedUrl: computed(() => {
        if (data.type == "edit") { return myOptions.editUrl; }
        else if (data.type == "add") { return myOptions.addUrl; }
    }),
    isDetail: computed(() => { return (data.type == "detail"); }),
    isAdd: computed(() => { return data.type == "add"; }),
    isEdit: computed(() => { return data.type == "edit"; }),
    computedDialogTitle: computed(() => {
        var title = "";
        if (data.type == "add") { title = "新增"; }
        else if (data.type == "edit") { title = "编辑"; }
        else if (data.type == "detail") { title = "详情"; }
        return title;
    }),
    loading: false,
    type: " ",
});

const props = defineProps({
    data: { type: Object, default: function () { return {} } },
    type: { type: String, default: "add", },//  add  |   edit  |  detail
    mode: { type: String, default: "dialog" },//  dialog  |  pingPu
});


const hideDialog = (e) => { myOptions.modalVisible = false; }
const showDialog = () => {
    data.type = props.type;
    console.info("当前弹窗模式:", data.type)
    myOptions.modalVisible = true;
    if (data.isDetail) { getDetail(); }
};

const getDetail = function () {
    if (!myOptions.detailUrl) { return }

    klcs[myOptions.detailUrlType]({
        url: myOptions.detailUrl, params: { [myOptions.detailIdName]: data.formData[myOptions.detailIdName] }
    })
        .then((response) => {
            
            // var data = {"a": "你好", "b": "你,我", "lll": ["1", "2", "3"],"start1": "2021-01-01","end1": "2021-01-02"}
            var data = klcs.unPackageParams(data, myOptions.stringArray, myOptions.arrayObject);
            console.warn("详情数据为: ", data);
            // message.success("获取详情成功！");
        })
}

const emit = defineEmits(["submitOk", 'update:text']);


const onSubmit = async () => {
    var flag = await formRef.value.validate();
    if (!flag) { return; }

    // data.formData = { a: "你好", b: "你,我", "lll": "1,2,3", timeArray: ["2021-01-01", "2021-01-02"] };

    var params = klcs.packageParams(
        data.formData,
        myOptions.stringArray,
        myOptions.arrayObject
    );

    console.warn('提交输出的参数为: ', params);

    data.loading = true;
    klcs[myOptions.UrlType]({ url: data.computedUrl, params: params })
        .then((response) => {

            if (klcs.successDataFlag(response)) {
                message.success("成功！");
                emit("submitOk"); // 事件触发
                hideDialog();
            } else { }
        })
        .finally(() => {
            data.loading = false;
        });
};
</script>
<style lang="less" scoped></style>